<template>
<!--  <h1>Hello App!</h1>-->
<!--  <p>-->
    <!-- use the router-link component for navigation. -->
    <!-- specify the link by passing the `to` prop. -->
    <!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<!--    <router-link to="/">Go to Home</router-link>-->
<!--    <router-link to="/about">Go to About</router-link>-->
<!--  </p>-->
  <!-- route outlet -->
  <!-- component matched by the route will render here -->
  <router-view></router-view>
</template>

<script>
import {ref, reactive, toRefs, computed, watchEffect, watch, provide} from 'vue'
import User from "./components/User.vue";
import Student from "./components/Student.vue";

export default {
  name: 'App',
  components: {
    User, Student
  },
  setup() {
    const user = reactive({
      username: 'aaa',
      age: 18
    });

    const student = reactive({
      name: '小红',
      classname: '少年一班'
    });
    provide('student', student);
    return {...toRefs(user), student}
  }
}
</script>

<style scoped>
/* 样式 */
.d1 {
  color: blue;
}
</style>